<template>
	<view class="integral-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="bg-cover"></view>
		<view class="content">
			<view class="statistics-card">
				<view class="grid-item">
					<text class="label">累计获取</text>
					<text class="value">{{form.have}}</text>
				</view>
				<view class="grid-item">
					<text class="label">已使用积分</text>
					<text class="value">{{form.use}}</text>
				</view>
			</view>

			<view class="qudao">
				<view class="hd">获取积分方式：</view>
				<view class="bd">
					<view>1.购买188元架子得积分;</view>
					<view>2.开通一个水架客户;</view>
					<view>3.分享代理商</view>
				</view>
			</view>

			<view class="records-card">
				<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>
				<view class="records-cell">
					<view class="cell-item" v-for="(item,index) in list" :key="index">
						<view class="info">
							<view class="name">{{item.remark}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
						<view class="count">{{ item.points }}</view>
						<view class="count lower">-{{ item.points }}</view>
					</view>

					<view class="empty-data" v-if="list.length===0">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '积分管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		form: {
			have: '520.00',
			use: '90.00'
		},
		tabsList: ['全部', '获得积分', '使用积分'],
		params: {
			current: 0,
			skip: 0,
		},
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getDataList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		getDataList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getDataList();
	})

	function getDataList() {
		state.list = [];
	}

	function changeTab(index) {
		state.params.current = index;
		state.isMore = true;
		state.list = [];
		getDataList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		form,
		tabsList,
		params,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.integral-manage {

		// background:#edf1fa;
		.bg-cover {
			padding-bottom: 140rpx;
			background: linear-gradient(180deg,
					rgba(199, 224, 255, 0.5) 0%,
					rgba(199, 224, 255, 0.2) 77%,
					rgba(255, 255, 255, 0) 100%);
		}

		.content {
			position: relative;
			margin-top: -120rpx;
			padding: 0 $m24 $m24;

			.statistics-card {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 160rpx;
				padding: $m12 0;
				border-radius: $radius-16;
				box-sizing: border-box;

				.grid-item {
					display: flex;
					flex-direction: column;
					padding: $m12 0;
					text-align: center;

					.label {
						color: $tips-color;
					}

					.value {
						font-size: $font-36;
						color: $primary-color;
						font-weight: 600;
					}
				}
			}

			.qudao {
				background: #fff;
				padding: $m24;

				.hd {
					font-size: $font-32;
					color: $main-color;
					font-weight: 700;
				}

				.bd {}
			}

			.records-card {
				margin-top: $m24;
				background-color: #fff;
				border-radius: $radius-16;

				.records-cell {
					padding: 0 $m24;

					.cell-item {
						@include f-between;
						padding: $m24 0;
						border-bottom: 1rpx solid $border-color;

						.info {
							.name {
								color: $main-color;
								font-weight: 500;
							}

							.time {
								font-size: $font-24;
								color: $tips-color;
							}
						}

						.count {
							font-size: $font-36;
							color: $primary-color;
							font-weight: bold;

							&.lower {
								color: $main-color;
							}
						}

						&:last-child {
							border-bottom: none;
						}
					}

					.empty-data {
						margin-bottom: $m24;
						padding: $m24;
						text-align: center;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>